<template>
	<view class="page_view">
		<view class="zhanwei"></view>
		<view class="top">
			<view class="uplod flex1" @click="upload">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/upload.png" class="uplod_icon" mode=""></image>
				<view class="uplod_text">
					电子票据上传
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_title">
				上传记录
			</view>
			<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower" :style="{height:scrollH+'px'}">
				<view class="list">
					<view class="list_item flex" v-for="(item,index) in list">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/pdf.png" class="list_item_img" mode=""></image>
						<view class="list_item_right">
							<view class="list_item_right_top">
								{{item.name}}
							</view>
							<view class="list_item_right_bottom flex">
								<view class="">
									{{item.size}}kB
								</view>
								<view class="">
									{{item.created_at}}
								</view>
							</view>
						</view>
					</view>
					<u-empty  mode="data" v-if="list.length == 0"></u-empty>
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import {ticket,tickethandle} from '@/api/common.js'
	import getScrollHeight from "@/utils/utils.js" //获取余下的高度
	import uploadImage from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				scrollH:'',
				list:[],
				last_page:'',
				page:1,
				up_file :''
			}
		},
		onLoad() {
			this.get_list()
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 15
			})	
		},
		methods: {
			scrolltolower(){
				if(this.page < this.last_page){
					this.page ++
					this.get_list()
				}
			},
			get_list(){
				let t = this
				ticket({
					// page:t.page,
				}).then(res=>{
					console.log(res)
					t.last_page = res.data.last_page
					t.list = res.data.data
				})
			},
			upload(){
				let t = this
				uni.chooseMessageFile({
				  count: 1,
				  type: 'file',
				  success (res) {
					console.log(res)
					t.up_file = res.tempFiles[0];
					let lastindex = t.up_file.path.lastIndexOf('.');
					let type = t.up_file.path.substring(lastindex + 1, t.up_file.path.length);
					console.log(type);
					if(type != 'pdf'){
						uni.showToast({
							title:'您上传的文件不合法',
							icon:'none'
						})
						return false
					}
					uploadImage(t.up_file.path,t.up_file.name,'wechat/', (res) => {
						let path = res.imgUrl
						tickethandle({
							path:path
						}).then(res=>{
							console.log(res)
							t.page = 1
							t.list = []
							t.get_list()
						})
					})
				  },
				  fail(res){
					  console.log(res)
				  }
				})
			}
		}
	}
</script>

<style>
	.top{
		padding: 0 30rpx;
		box-sizing: border-box;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F4F4F4;
	}
.uplod{
	width: 100%;
	height: 104rpx;
	justify-content: center;
	border-radius: 52rpx;
	background: #E2EEFF;
	
}
.uplod_icon{
	width: 23rpx;
	height: 23rpx;
}
.uplod_text{
	color: #0165FB;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 700;
	margin-left: 10rpx;
}
.zhanwei{
	width: 100%;
	height: 40rpx;
}
.content{
	padding: 30rpx;
	box-sizing: border-box;
}
.content_title{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 700;
	height: 60rpx;
	line-height: 60rpx;
}
.list{
	margin-top: 20rpx;
}
.list_item{
	width: 100%;
	height: 142rpx;
}
.list_item_img{
	width: 96rpx;
	height: 96rpx;
}
.list_item_right{
	width: calc(100% - 106rpx);
}
.list_item_right_top{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-weight: 400;
}
.list_item_right_bottom{
	width: 100%;
	color: #999;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 22rpx;
	font-weight: 400;
	margin-top: 10rpx;
}
/deep/.u-empty{
	margin-top: 300rpx !important;
}
</style>
